<template>
  <ResetPassword
    v-if="canSetPassword"
    class="phonecode"
    :shop-data="shopData"
    :phone="phone"
  />
  <section v-else class="container phonecode">
    <p class="hello">找回密码</p>
    <p class="intro">请填写您的手机号码</p>
    <ElForm ref="form" :model="form" status-icon class="login-form">
      <ElFormItem label="手机号" prop="mobile">
        <ElInput
          v-model="form.mobile"
          type="text"
          auto-complete="off"
        ></ElInput>
      </ElFormItem>
      <ElFormItem class="verify" label="验证码">
        <ElInput
          v-model="form.verify"
          type="text"
          auto-complete="off"
          class="input-verify"
        ></ElInput>
        <ElButton class="btn-verify-code" @click="sendCode">{{
          timerCount > 0 ? timerCount + 's' : '获取验证码'
        }}</ElButton>
      </ElFormItem>
      <ElFormItem>
        <ElButton class="submit-button" type="primary" @click="submit"
          >下一步</ElButton
        >
      </ElFormItem>
    </ElForm>
  </section>
</template>

<script>
import {http, catchAppError} from '@/util';
import url from '@/config';
import ResetPassword from '@/components/account/ResetPassword.vue';

export default {
  components: {
    ResetPassword
  },
  data() {
    return {
      canSetPassword: false,
      phone: '',
      form: {
        mobile: '',
        verify: ''
      },
      isTimer: false,
      timerCount: 0,
      timerId: 0,
      shopData: {}
    };
  },
  methods: {
    timer() {
      this.isTimer = true;
      this.timerCount = 60;
      this.timerId = setInterval(() => {
        if (this.timerCount <= 0) {
          clearInterval(this.timer);
          return;
        }
        this.timerCount -= 1;
      }, 1000);
    },
    sendCode() {
      if (this.isTimer) {
        return;
      }

      http
        .post(url.sendMessage, {
          shop_phone: this.form.mobile
        })
        .then(() => {
          this.timer();
          this.$message({
            message: '发送成功',
            duration: 5000,
            type: 'success'
          });
        })
        .catch(catchAppError);
    },
    submit() {
      const allIsCheck = this.form.mobile && this.form.verify;
      if (!allIsCheck) {
        this.$message({
          message: '选项不能为空',
          duration: 5000,
          type: 'error'
        });
        return;
      }
      http
        .post(url.accountOrShop, {
          shop_phone: this.form.mobile,
          captcha: this.form.verify
        })
        .then(res => {
          this.canSetPassword = true;
          this.shopData = res;
          this.phone = this.form.mobile;
        })
        // .catch(() => {
        //   this.canSetPassword = true;
        //   this.phone = this.form.mobile;
        //   this.shopData = {
        //     count: 2,
        //     shop: {
        //       '0': {
        //         id: 195,
        //         shop_name: '左氏爱考拉母婴生活馆（霍州店）',
        //         username: 'admin'
        //       },
        //       '1': {
        //         id: 196,
        //         shop_name: '左氏爱2拉母婴生活馆（霍州店）',
        //         username: 'admin1'
        //       }
        //     }
        //   };
        // });
        .catch(catchAppError);
    }
  }
};
</script>

<style lang="scss">
.phonecode {
  .el-button {
    &.btn-verify-code {
      width: 90px;
    }
  }
}
</style>
